import React, { Component } from 'react'
import {
    Card,
    Descriptions,
    Row, 
    Col,
    Image,
    Button,
    Tag,
    PageHeader
} from 'antd'
import {CloudOutlined,ChromeOutlined,QqOutlined,WechatOutlined,MailOutlined} from '@ant-design/icons'

import wx from'./images/wx.jpg'
import zfb from'./images/zfb.jpg'
import './home.css'

// 首页路由
export default class Home extends Component {

    state = {
        isVisited: true,
        bannerList: []
    }

    handleChange = (isVisited) => {
        return () => this.setState({isVisited})
    }

    render() {

        return (
            <div className='home'>
                <Card
                    className="home_card"
                    bordered={false}>
                    <Descriptions column={1} contentStyle={{marginBottom:5,color:'#676a6c'}}>
                        <Descriptions.Item contentStyle={{fontSize:26,fontFamily:'inherit'}}>基于React的后台管理系统</Descriptions.Item>
                        <Descriptions.Item><span>做这个系统的目的既为了学习也为了练手</span></Descriptions.Item>
                        <Descriptions.Item>感谢UP主：遇见狂神说、尚硅谷、IT楠老师、MarkerHub的开源课程</Descriptions.Item>
                        <Descriptions.Item>既然是练手作品，意料之外的BUG也是在所难免的，还希望大佬们指正</Descriptions.Item>
                        <Descriptions.Item><Tag color="#87d068">免费开源</Tag></Descriptions.Item>
                        <Descriptions.Item><Button type="primary" size={'small'} icon={<CloudOutlined />}>访问码云</Button></Descriptions.Item>
                    </Descriptions>
                </Card>


                    <Card
                        className="home-table-left"
                        headStyle={{fontSize:17,color:'#676a6c'}}
                        title={'联系信息'}
                        bodyStyle={{padding: 0, height: 200, width: 200}}>
                    <Descriptions column={1} labelStyle={{marginTop:10,marginLeft:15,color:'#676a6c'}}
                        contentStyle={{marginTop:10,marginLeft:5,color:'#676a6c'}}>
                        <Descriptions.Item label={<ChromeOutlined />}></Descriptions.Item>
                        <Descriptions.Item label={<QqOutlined />}>1579792633</Descriptions.Item>
                        <Descriptions.Item label={<WechatOutlined />}>wangziming9696</Descriptions.Item>
                        <Descriptions.Item label={<MailOutlined />}>1579792633@qq.com</Descriptions.Item>
                        <Descriptions.Item></Descriptions.Item>
                    </Descriptions>
                    </Card>

                    <Card
                        className="home-table-left"
                        headStyle={{fontSize:17,color:'#676a6c'}}
                        title={'技术选型'}
                        style={{width:'30%'}}
                        bodyStyle={{paddingLeft: 0, height: 300, width: 200}}>
                    <Descriptions column={1} labelStyle={{marginTop:10,marginLeft:15,color:'#676a6c'}}
                        contentStyle={{marginTop:10,marginLeft:5,color:'#676a6c'}}>
                        <Descriptions.Item label="核心框架">SpringBoot</Descriptions.Item>
                        <Descriptions.Item label="持久层框架">MyBatis</Descriptions.Item>
                        <Descriptions.Item label="前端框架">React</Descriptions.Item>
                        <Descriptions.Item label="缓存处理">Redis</Descriptions.Item>
                        <Descriptions.Item label="负载均衡">Nginx</Descriptions.Item>
                        <Descriptions.Item label="集成部署">Docker</Descriptions.Item>
                    </Descriptions>
                    </Card>

                    <Card 
                        title='捐赠' 
                        className="home-table-right"
                        bodyStyle={{height: 400}}
                        headStyle={{fontSize:17,color:'#676a6c'}}>
                        <PageHeader
                            className="site-page-header"
                            subTitle="请作者喝杯咖啡吧"/>
                        <Row>
                            <Col span={12}>
                                <Image style={{marginLeft:40,marginTop:30}}
                                    width={200}
                                    height={200}
                                    preview={false}
                                    src={zfb}/>
                            </Col>
                            <Col span={12}>
                                <Image style={{marginLeft:40,marginTop:30}}
                                    width={200}
                                    height={200}
                                    preview={false}
                                    src={wx}/>
                            </Col>
                        </Row>
                        
                    </Card>
            </div>
        )
    }
}
